<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>花开富贵的地图</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="test.css">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
          securityJsCode:"350260bc0712482ececcf9e2ae7cc222",
        }
      </script>
      <script src="https://webapi.amap.com/loader.js"></script>
      <script>
            AMapLoader.load({
                key: "9f2ad7c967718753d72f1420dddedf2f", //申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            })
            .then((AMap) => {
                const map = new AMap.Map('homeContainer', {
                viewMode: '2D',  // 默认使用 2D 模式
                zoom:17,  //初始化地图层级
                center: [104.1008, 30.675]  //初始化地图中心点
                });
                
            const labelsLayer = new AMap.LabelsLayer({
                zooms: [3, 20],
                zIndex: 1000,
                collision: true, //该层内标注是否避让
                allowCollision: true, //设置 allowCollision：true，可以让标注避让用户的标注
            });
        //设置一个图标对象
            const icon = {
                type: "image", //图标类型，现阶段只支持 image 类型
                image: "https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png", //可访问的图片 URL
                size: [64, 30], //图片尺寸
                anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
            };
            const icon1 = {
                type: "image", //图标类型，现阶段只支持 image 类型
                image: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", //可访问的图片 URL
                 //图片尺寸
                anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
            };
        //设置文字对象
            function setName(s){
                return{
                    content: s, //要展示的文字内容
                    direction: "right", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                    offset: [-20, -5], //在 direction 基础上的偏移量
                    //文字样式
                    style: {
                        fontSize: 12, //字体大小
                        fillColor: "#22886f", //字体颜色
                        strokeColor: "#fff", //描边颜色
                        strokeWidth: 2, //描边宽度
                    }
                }
            };
            var labelMarker=new Array();
            function setNewPoint(name,position){
                labelMarker.push(new AMap.LabelMarker({
                name: name, //此属性非绘制文字内容，仅为标识使用
                position: position,
                zIndex: 16,
                rank: 1, //避让优先级
                icon: icon, //将 icon 对象传给 icon 属性
                text: setName(name), //将 text 对象传给 text 属性
                })) ;
            };
            function setNewPoint1(name,position){
                labelMarker.push(new AMap.LabelMarker({
                name: name, //此属性非绘制文字内容，仅为标识使用
                position: position,
                zIndex: 16,
                rank: 1, //避让优先级
                icon: icon1, //将 icon 对象传给 icon 属性
                text: setName(name), //将 text 对象传给 text 属性
                })) ;
            };
            setNewPoint1("吴迪暴龙神兽的车",[103.958896,30.74237]);
            setNewPoint1("花开富贵的车",[103.963214,30.743143]);
            setNewPoint1("况课奇才的车",[103.953363,30.743542]);
            setNewPoint1("旷世奇才的车",[103.957521,30.748394]);
            

            setNewPoint("东方电气中央研究院",[103.962334,30.742273]);
            setNewPoint("四川研宝科技有限公司",[103.96631,30.740347]);
            setNewPoint("成都红旗连锁股份有限公司",[103.961515,30.748354]);
            setNewPoint("德奥汽车连锁",[103.960165,30.745713]);
            setNewPoint("迈普通信技术有限公司",[103.953611,30.745848]);
            setNewPoint("普川生材",[103.952155,30.746865]);
            setNewPoint("成都亚光高新产业园",[103.955921,30.748361]);
            setNewPoint("四川创意信息技术股份有限公司",[103.950677,30.747119]);
            setNewPoint("成都迪康药业有限公司",[103.95865,30.746769]);
            setNewPoint("成都智能信息产业园",[103.965008,30.745693]);
            setNewPoint("成都岸宝纸制品有限公司",[103.96595,30.747478]);
            setNewPoint("四川奇力药物研究所",[103.959089,30.748775]);
            setNewPoint("成都亚光高新产业园",[103.955734,30.748425]);
            setNewPoint("吉泰安(四川)药业有限公司",[103.958742,30.751184]);
            setNewPoint("成都万安彩印有限公司",[103.953613,30.74921]);   
            setNewPoint("成都东盛包装材料有限公司",[103.970414,30.745215]);
            setNewPoint("四川能投",[103.952224,30.743848]);
            setNewPoint("四川太平洋药业公司",[103.95049,30.742072]);
            setNewPoint("蓝剑科技园",[103.9557,30.742019]);
            setNewPoint("四川制药制剂有限公司",[103.948065,30.742682]);
            setNewPoint("四川通达企业集团",[103.968809,30.744571]);
            setNewPoint("蓝光集团",[103.959821,30.74081]);
            setNewPoint("西门子智能制造成都创新中心",[103.962006,30.739801]);
            
            setNewPoint("成都银河磁体股份有限公司",[103.970382,30.741866]);
            setNewPoint("纵横科技园",[103.969914,30.739694]);
                     
            

            labelMarker[0].on('click', function(){
                alert("您当前选中吴迪暴龙神兽的车");
            });
            labelsLayer.add(labelMarker);
            map.add(labelsLayer);
            })
            .catch((e) => {
            console.error(e); //加载错误提示
            });
      </script>
      
</head>
<body>
    <span id="patternControl">
        <span id="homepage" v-show="pattern==0">
            <div id="homeContainer"></div>
            <div id="ask">
                <h1>你可以选中车辆后点确定来查看其行驶轨迹</h1>
                <input type="button" value="确定" @click="toPlanRoad();changePattern(1)">
            </div>
        </span>

        <span id="road" v-show="pattern==1">
            <div id="roadContainer"></div>
            <div id="panel"></div>
            <input type="button" value="驾驶模式" id="toDriveButton" @click="toDriveAlong();changePattern(2)" >
            <input type="button" value="返回" id=returnButton @click="changePattern(0)">
        </span>

        <span id="drive" v-show="pattern==2">
            <div id="driveContainer" ></div>
            <div class="input-card">
              <h4>轨迹回放控制</h4>
              <div class="input-item">
              <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
              <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
              </div>
              <div class="input-item">
              <input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()"/>
              <input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()"/>
              </div>
            </div>
            <input type="button" value="返回" id="toDriveButton" @click="changePattern(1)" >
        </span>
    </span>
</body>

<script>
    new Vue({
        el:"#patternControl",
        data:{
            pattern:0,
            startLngLat:[],
            endLngLat:[],
            driveLine:[],
        },
        methods:{
            changePattern:function(i){
                this.pattern=i;
            },
            toPlanRoad:function(){
                var startLngLat = [this.startLngLat[0], this.startLngLat[1]];  
                var endLngLat = [this.endLngLat[0], this.endLngLat[1]];  
                var driveLine=[];
                AMapLoader.load({
                    key: "9f2ad7c967718753d72f1420dddedf2f", //申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                })
                .then((AMap) => {
                    const map = new AMap.Map('roadContainer', {
                    viewMode: '2D',  // 默认使用 2D 模式
                    zoom:18,  //初始化地图层级
                    center: [104.1008, 30.675] //初始化地图中心点
                    });
                    
        //设置一个图标对象
        const labelsLayer = new AMap.LabelsLayer({
                zooms: [3, 20],
                zIndex: 1000,
                collision: true, //该层内标注是否避让
                allowCollision: true, //设置 allowCollision：true，可以让标注避让用户的标注
            });
        //设置一个图标对象
            const icon = {
                type: "image", //图标类型，现阶段只支持 image 类型
                image: "https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png", //可访问的图片 URL
                size: [64, 30], //图片尺寸
                anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
            };
            const icon1 = {
                type: "image", //图标类型，现阶段只支持 image 类型
                image: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", //可访问的图片 URL
                 //图片尺寸
                anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
            };
        //设置文字对象
            function setName(s){
                return{
                    content: s, //要展示的文字内容
                    direction: "right", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                    offset: [-20, -5], //在 direction 基础上的偏移量
                    //文字样式
                    style: {
                        fontSize: 12, //字体大小
                        fillColor: "#22886f", //字体颜色
                        strokeColor: "#fff", //描边颜色
                        strokeWidth: 2, //描边宽度
                    }
                }
            };
            var labelMarker=new Array();
            function setNewPoint(name,position){
                labelMarker.push(new AMap.LabelMarker({
                name: name, //此属性非绘制文字内容，仅为标识使用
                position: position,
                zIndex: 16,
                rank: 1, //避让优先级
                icon: icon, //将 icon 对象传给 icon 属性
                text: setName(name), //将 text 对象传给 text 属性
                })) ;
            };
            function setNewPoint1(name,position){
                labelMarker.push(new AMap.LabelMarker({
                name: name, //此属性非绘制文字内容，仅为标识使用
                position: position,
                zIndex: 16,
                rank: 1, //避让优先级
                icon: icon1, //将 icon 对象传给 icon 属性
                text: setName(name), //将 text 对象传给 text 属性
                })) ;
            };
            setNewPoint1("吴迪暴龙神兽的车",[103.958896,30.74237]);
            setNewPoint1("花开富贵的车",[103.963214,30.743143]);
            setNewPoint1("况课奇才的车",[103.953363,30.743542]);
            setNewPoint1("旷世奇才的车",[103.957521,30.748394]);
            

            setNewPoint("东方电气中央研究院",[103.962334,30.742273]);
            setNewPoint("四川研宝科技有限公司",[103.96631,30.740347]);
            setNewPoint("成都红旗连锁股份有限公司",[103.961515,30.748354]);
            setNewPoint("德奥汽车连锁",[103.960165,30.745713]);
            setNewPoint("迈普通信技术有限公司",[103.953611,30.745848]);
            setNewPoint("普川生材",[103.952155,30.746865]);
            setNewPoint("成都亚光高新产业园",[103.955921,30.748361]);
            setNewPoint("四川创意信息技术股份有限公司",[103.950677,30.747119]);
            setNewPoint("成都迪康药业有限公司",[103.95865,30.746769]);
            setNewPoint("成都智能信息产业园",[103.965008,30.745693]);
            setNewPoint("成都岸宝纸制品有限公司",[103.96595,30.747478]);
            setNewPoint("四川奇力药物研究所",[103.959089,30.748775]);
            setNewPoint("成都亚光高新产业园",[103.955734,30.748425]);
            setNewPoint("吉泰安(四川)药业有限公司",[103.958742,30.751184]);
            setNewPoint("成都万安彩印有限公司",[103.953613,30.74921]);   
            setNewPoint("成都东盛包装材料有限公司",[103.970414,30.745215]);
            setNewPoint("四川能投",[103.952224,30.743848]);
            setNewPoint("四川太平洋药业公司",[103.95049,30.742072]);
            setNewPoint("蓝剑科技园",[103.9557,30.742019]);
            setNewPoint("四川制药制剂有限公司",[103.948065,30.742682]);
            setNewPoint("四川通达企业集团",[103.968809,30.744571]);
            setNewPoint("蓝光集团",[103.959821,30.74081]);
            setNewPoint("西门子智能制造成都创新中心",[103.962006,30.739801]);
            
            setNewPoint("成都银河磁体股份有限公司",[103.970382,30.741866]);
            setNewPoint("纵横科技园",[103.969914,30.739694]);
                     
            

            labelMarker[0].on('click', function(){
                alert("您当前选中吴迪暴龙神兽的车");
            });
            labelsLayer.add(labelMarker);
            map.add(labelsLayer); 
                AMap.plugin('AMap.Driving', function() {
                    var driving = new AMap.Driving({
                    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
                    policy: AMap.DrivingPolicy.LEAST_TIME,
                    map:map,
                    panel: "panel",
                    extensions:'all'
                    });
                    driving.search([103.948065,30.742682],[103.970414,30.745215],function(status,result){
                        if (status === 'complete') {
                            log.success('绘制驾车路线完成');
                            for(let i=0;i<result.routes.length;i++){
                                for(let j=0;j<result.routes[i].steps.length;j++){
                                    for(let k=0;k<result.routes[i].steps[j].path.length;k++){
                                        driveLine.push(result.routes[i].steps[j].path[k]);
                                    } 
                                }
                            }
                        } else {
                            log.error('获取驾车数据失败：' + result)
                        }
                    });
                })
                }).catch((e) => {
                    console.error(e); //加载错误提示
                    });
                this.driveLine=driveLine;
            },
            toDriveAlong:function(){
                var lineArr=this.driveLine;
                AMapLoader.load({
                    key: "9f2ad7c967718753d72f1420dddedf2f", //申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    })
                .then((AMap) => {
                    AMap.plugin('AMap.MoveAnimation', function(){
                    var marker;
                var map = new AMap.Map("driveContainer", {
                resizeEnable: true,
                center: [116.397428, 39.90923],
                zoom: 17
                });
                const labelsLayer = new AMap.LabelsLayer({
                zooms: [3, 20],
                zIndex: 1000,
                collision: true, //该层内标注是否避让
                allowCollision: true, //设置 allowCollision：true，可以让标注避让用户的标注
            });
        //设置一个图标对象
            const icon = {
                type: "image", //图标类型，现阶段只支持 image 类型
                image: "https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png", //可访问的图片 URL
                size: [64, 30], //图片尺寸
                anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
            };
            const icon1 = {
                type: "image", //图标类型，现阶段只支持 image 类型
                image: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", //可访问的图片 URL
                 //图片尺寸
                anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
            };
        //设置文字对象
            function setName(s){
                return{
                    content: s, //要展示的文字内容
                    direction: "right", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                    offset: [-20, -5], //在 direction 基础上的偏移量
                    //文字样式
                    style: {
                        fontSize: 12, //字体大小
                        fillColor: "#22886f", //字体颜色
                        strokeColor: "#fff", //描边颜色
                        strokeWidth: 2, //描边宽度
                    }
                }
            };
            var labelMarker=new Array();
            function setNewPoint(name,position){
                labelMarker.push(new AMap.LabelMarker({
                name: name, //此属性非绘制文字内容，仅为标识使用
                position: position,
                zIndex: 16,
                rank: 1, //避让优先级
                icon: icon, //将 icon 对象传给 icon 属性
                text: setName(name), //将 text 对象传给 text 属性
                })) ;
            };
            function setNewPoint1(name,position){
                labelMarker.push(new AMap.LabelMarker({
                name: name, //此属性非绘制文字内容，仅为标识使用
                position: position,
                zIndex: 16,
                rank: 1, //避让优先级
                icon: icon1, //将 icon 对象传给 icon 属性
                text: setName(name), //将 text 对象传给 text 属性
                })) ;
            };
            
            

            setNewPoint("东方电气中央研究院",[103.962334,30.742273]);
            setNewPoint("四川研宝科技有限公司",[103.96631,30.740347]);
            setNewPoint("成都红旗连锁股份有限公司",[103.961515,30.748354]);
            setNewPoint("德奥汽车连锁",[103.960165,30.745713]);
            setNewPoint("迈普通信技术有限公司",[103.953611,30.745848]);
            setNewPoint("普川生材",[103.952155,30.746865]);
            setNewPoint("成都亚光高新产业园",[103.955921,30.748361]);
            setNewPoint("四川创意信息技术股份有限公司",[103.950677,30.747119]);
            setNewPoint("成都迪康药业有限公司",[103.95865,30.746769]); 
            setNewPoint("成都智能信息产业园",[103.965008,30.745693]);
            setNewPoint("成都岸宝纸制品有限公司",[103.96595,30.747478]);
            setNewPoint("四川奇力药物研究所",[103.959089,30.748775]);
            setNewPoint("成都亚光高新产业园",[103.955734,30.748425]);
            setNewPoint("吉泰安(四川)药业有限公司",[103.958742,30.751184]);
            setNewPoint("成都万安彩印有限公司",[103.953613,30.74921]);   
            setNewPoint("成都东盛包装材料有限公司",[103.970414,30.745215]);
            setNewPoint("四川能投",[103.952224,30.743848]);
            setNewPoint("四川太平洋药业公司",[103.95049,30.742072]);
            setNewPoint("蓝剑科技园",[103.9557,30.742019]);
            setNewPoint("四川制药制剂有限公司",[103.948065,30.742682]);
            setNewPoint("四川通达企业集团",[103.968809,30.744571]);
            setNewPoint("蓝光集团",[103.959821,30.74081]);
            setNewPoint("西门子智能制造成都创新中心",[103.962006,30.739801]);
            
            setNewPoint("成都银河磁体股份有限公司",[103.970382,30.741866]);
            setNewPoint("纵横科技园",[103.969914,30.739694]);
                     
            

            labelMarker[0].on('click', function(){
                alert("您当前选中吴迪暴龙神兽的车");
            });
            labelsLayer.add(labelMarker);
            map.add(labelsLayer);
                marker = new AMap.Marker({
                    map: map,
                    position: lineArr[0],
                    icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
                    offset: new AMap.Pixel(-13, -26),
                });
        
                // 绘制轨迹
                var polyline = new AMap.Polyline({
                    map: map,
                    path: lineArr,
                    showDir:true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });
        
                var passedPolyline = new AMap.Polyline({
                    map: map,
                    strokeColor: "#AF5",  //线颜色
                    strokeWeight: 6,      //线宽
                });
                marker.on('moving', function (e) {
                    passedPolyline.setPath(e.passedPath);
                    map.setCenter(e.target.getPosition(),true)
                });
                map.setFitView();
                window.startAnimation = function startAnimation () {
                    marker.moveAlong(lineArr, {
                        // 每一段的时长
                        duration: function(index,data){
                            return 2*AMap.GeometryUtil.distance(lineArr[index],lineArr[index+1]);
                        },//回调函数，控制动画速度
                        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                        autoRotation: true,
                    });
                };
                window.pauseAnimation = function () {
                    marker.pauseMove();
                };
                window.resumeAnimation = function () {
                    marker.resumeMove();
                };
                window.stopAnimation = function () {
                    marker.stopMove();
                };
            });
            })
            },
        }
    })
</script>
</html>